<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <style>
        .head {
            display: flex;
            background-color: rgb(0, 151, 255);
            width: 100%;
            height: 100px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .head h1 {
            color: #ffffff;
        }
        
        .but {
            color: #ffffff;
            margin-left: 10%;
            width: 80%;
            height: 70px;
            background: rgb(56, 202, 115);
            border: none;
            border-radius: 10px;
            font-size: 30px;
        }
        
        input {
            height: 50px;
            border: none;
        }
    </style>
    <!-- jquery的位置需要更改下 -->
</head>

<body>
    <div class="head">
        <h1>用户注册</h1>
    </div>

    <div id="back">
        <form action="">
            <div class="">手机号码
                <input class="input" type="phonenumber" name="phonenumber" id="phonenumber" placeholder="手机号码" style="margin-top:10px;">
                <small id="smallPhonenumber">手机号码</small>
            </div>

            <div class="">请输入密码
                <input class="input" type="password" name="password" id="password" placeholder="请输入密码" style="margin-top:10px;">
                <small id="smallPassword">请设置账号密码</small>
            </div>
            <div class="">确认密码
                <input class="input" type="password" name="password1" id="password1" placeholder="请再次输入密码" style="margin-top:10px;">
                <small id="smallPassword1">请重新输入密码</small>
            </div>
            <tr>

                <td class="t-left">性别</td>
                <td class="t-right">
                    <input type="radio" name="gender" value="男">男
                    <input type="radio" name="gender" value="女">女

                </td>
            </tr>



            <div class="but" id="submit" style="margin-top:10px;">
                <input class="but but1" type="submit" value="注册">
            </div>

        </form>

        <script>
            $(function() {
                var phonenumberfersult = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
                var passwordfersult = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;

                $("#phonenumber").blur(function() {
                    var phonenumberval = $("#password").val();
                    if (phonenumberfersult.test(phonenumberval) && phonenumberval != null) {

                        $("#smallPhonenumber").text("可以使用");
                    } else {
                        $("#smallPhonenumber").text("必须合法的手机号码");
                    }
                });
                $("#password").blur(function() {
                    var passwordval = $("#password").val();
                    if (passwordfersult.test(passwordval) && passwordval != null) {

                        $("#smallPassword").text("可以使用");
                    } else {
                        $("#smallPassword").text("必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间");
                    }
                });
                $("#password1").blur(function() {
                    if ($("#password").val() == $("#password1").val() && $("#password1").val() != null) {
                        $("#smallPassword1").text("可以使用");
                    } else {
                        $("#smallPassword1").text("两次密码不一致");
                    }
                });
            });
        </script>
    </div>
</body>

</html>